<template>
    <div
        class="callHistory"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <!-- 通话历史 -->
        <box-group-wrap pageTitle="通话历史" :isShowData="callhistory.length>0">
            <template slot="wrapBody">
                <div class="callHistory_item">
                    <el-table :data="callhistory" style="width:100%" stripe border class="heard-bg">
                        <el-table-column label="会话时间" type="index" width="155">
                            <template slot-scope="scope">{{scope.row.callTime}}</template>
                        </el-table-column>
                        <el-table-column label="呼叫号码" width="110">
                            <template
                                slot-scope="scope"
                            >{{scope.row.direction==='in'?scope.row.ani:scope.row.dnis}}</template>
                        </el-table-column>
                        <el-table-column label="呼叫类型" prop>
                            <template slot-scope="scope">{{scope.row.direction==='in'?'呼入':'呼出'}}</template>
                        </el-table-column>
                        <el-table-column label="客户名称" prop="custName"></el-table-column>
                        <el-table-column label="通话时长" prop="callLongSFM"></el-table-column>
                        <!-- <el-table-column label="话后小结" prop="remindTime"></el-table-column> -->
                        <!-- <el-table-column label="满意度" prop="remindTime"></el-table-column> -->
                    </el-table>
                </div>
            </template>
            <template slot="wrapRight">
                <i class="el-icon-refresh" @click="refreshTime($event)"></i>
                <span @click="callHistoryMore">更多>></span>
            </template>
        </box-group-wrap>
        <!--呼叫历史弹框 -->
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="dialogFlag"
            append-to-body
            center
            width="1200px"
        >
            <div slot="title">呼叫历史</div>
            <el-table :data="callhistoryMoreData" width="100%" stripe border class="heard-bg">
                <el-table-column label="通话方向" prop="direct" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.direction === "in" ? "呼入" : "呼出" }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="开始时间" prop="createTime" width="150px" show-overflow-tooltip></el-table-column>
                <el-table-column label="被叫号码" prop="dnis" width="130px" show-overflow-tooltip></el-table-column>
                <!-- <el-table-column label="CTI工号" prop="ctiNo"></el-table-column> -->
                <el-table-column label="呼叫号码" prop="ani" width="130px" show-overflow-tooltip></el-table-column>
                <el-table-column
                    label="通话时长"
                    prop="callLongSFM"
                    width="110px"
                    show-overflow-tooltip
                ></el-table-column>
                <!-- <el-table-column label="结束时间" prop="releaseTime" show-overflow-tooltip></el-table-column> -->
                <el-table-column label="坐席工号" prop="loginId" width="110px" show-overflow-tooltip></el-table-column>
                <!-- <el-table-column label="来电原因" prop="reasonTypeValue"></el-table-column> -->
                <el-table-column label="来电详因" prop="reasonValue" show-overflow-tooltip></el-table-column>
                <el-table-column
                    label="是否接通"
                    prop="isconnected"
                    width="100px"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row.isconnected === "1" ? "接通" : "未接通" }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="是否转接" prop="transterFlag"></el-table-column> -->
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                    :handleChangeSize="handleChangeSize"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                />
            </div>
            <div solt="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="dialogFlag=false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BoxGroupWrap from '@/components/boxgroupwrap/BoxGroupWrap.vue';
import Pagination from '@/components/Pagination/Pagination.vue';
import { getToken, getTokenHsbankNo } from '@/utils/auth';
// import { isEmptyObject } from '@/utils/Object';

export default {
    name: 'CallHistory',
    data() {
        return {
            callhistory: [],
            callhistoryMoreData: [],
            dialogFlag: false,
            currentPage: 1,
            pageSize: 10,
            total: '',
            pageLoading: false,
        }
    },
    components: { 'box-group-wrap': BoxGroupWrap, Pagination },
    computed: {
        ...mapGetters([
            'cardInfo_3004',
        ])
    },
    mounted() {
        this.pageLoading = true;
        // 展示呼叫历史
        this.getCallHistory();
    },
    methods: {

        // 获取通话时长
        getCallTime() {
            this.$post.latestAnnouncenment.callInCountStatis().then((res) => {
                this.callInCount = res.data.content.callInCount; // 日呼入总数
                this.totalInMinutes = res.data.content.totalMinutes; // 日呼入总时长
            });
            this.$post.latestAnnouncenment.callOutCountStatis().then((res) => {
                this.callOutCount = res.data.content.callInCount; // 日呼出总数
                this.connectedCount = res.data.content.connectedCount; // 日连接成功数量
                this.totalOutMinutes = res.data.content.totalMinutes; // 日呼出总时长
            });
        },
        // 呼叫历史刷新
        async refreshTime(e) {
            const dom = e.target;
            dom.style.animationPlayState = 'running'
            this.pageLoading = true;
            this.getCallTime();
            this.getData(1);
            let clearOut = setTimeout(function () {
                dom.style.animationPlayState = 'paused'
                clearTimeout(clearOut)
            }, 3000)
        },
        getData(data) {
            // 获取呼叫历史表格数据
            let pageNum = 1;
            let pageSize = 5;
            if (data === 1) {
                pageNum = 1;
                pageSize = 5;
            } else {
                pageNum = this.currentPage;
                pageSize = this.pageSize;
            }
            const parmers = {
                pageNum,
                pageSize,
                bnknbr: getTokenHsbankNo('HsbankNo'),
                // idNo: this.cardInfo_3004.CUSTID || '', // 证件号
                // acctNo: this.cardInfo_3004.CARDNO || '', // 卡号
                loginId: getToken()
                    ? JSON.parse(getToken()).userAccount
                    : '',
            };
            if (!parmers.loginId) {
                return;
            }
            this.$post.latestAnnouncenment.getPageByAgent(parmers).then((res) => {
                if (res.data.success) {
                    if (data === 1) {
                        this.callhistory = res.data.content.callList;
                    }
                    this.callhistoryMoreData = res.data.content.callList;
                    this.total = res.data.content.callCount;
                    this.pageLoading = false;
                }
            });
        },
        // 展示呼叫历史
        getCallHistory() {
            this.getData(1);
        },
        // 查看更多
        callHistoryMore() {
            this.dialogFlag = true;
            this.getData(2);
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getData(2);
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getData(2);
        },
    },
}
</script>
<style scoped lang="scss">
.callHistory_item {
    height: 200px;
}
.callHistory {
    .el-icon-refresh {
        font-size: 20px;
        margin-right: 10px;
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }
    .dialog-footer {
        text-align: center;
    }
}
</style>